import {Divider, Flex, message,Spin} from 'antd';
import {Bubble, Sender, XStream} from '@ant-design/x';
import {useState} from 'react';
import {UserOutlined} from '@ant-design/icons';
import XGLoading from '../../components/Loader';

export function Chat(){
    const [value, setValue] = useState<string>('');  // 用户输入的消息
    const [loading, setLoading] = useState<boolean>(false);  // 加载状态
    const [messageValue, setMessageValue] = useState([
        {
            id: 1,
            placement: 'start',
            content: '你是谁呢',
            icon: <UserOutlined />,
            flag: true,
        },
        {
            id: 2,
            placement: 'end',
            content: '我是智普AI机器人',
            icon: <UserOutlined />,
            flag: true,
        },
    ]);

    const fooAvatar: React.CSSProperties = {
        color: '#f56a00',
        backgroundColor: '#fde3cf',
    };

    const barAvatar: React.CSSProperties = {
        color: '#fff',
        backgroundColor: '#87d068',
    };

    const newMessage = ()=>{
        setMessageValue(prev => {
            const newUserMessage = {
                id: prev.length + 1,  // 确保用户消息的ID是正确的
                placement: 'start',  // 用户消息在左侧
                content: value,
                icon: <UserOutlined />,
                flag: false,  // 标记用户消息
            };

            // 返回更新后的消息列表，包含之前的消息和新添加的用户消息
            return [...prev, newUserMessage];
        });
    }

    const sendMessage = async () => {
        setLoading(true); // 开启加载状态
        let fullMessage = '';  // 用来拼接完整消息的变量

        // 添加用户消息到消息列表
        newMessage();
        
        // 先创建 AI 消息
        setMessageValue(prev => {
            const aiMessage = {
                id: prev.length + 2,  // AI 消息的 ID
                placement: 'end',
                content: <Spin></Spin> ,  // 初始内容为空
                icon: <UserOutlined />,
                flag: false,
            };
            return [...prev, aiMessage];
        });

        // try {
        //     // 向服务器请求流式消息
        //     const response = await fetch(`http://localhost:8000/api/ai/generateStream?message=${value}&userId=${123}`);
        //     // 检查返回的响应是否有效
        //     if (response.body) {
        //         // 使用流式处理
        //         for await (const chunk of XStream({ readableStream: response.body })) {
        //             const parsedData = JSON.parse(chunk.data);
        //             if (parsedData.result.output.content || parsedData.results[0].metadata.finishReason === "STOP") {
        //                 fullMessage += parsedData.result.output.content;
                        
        //                 // 更新消息列表
        //                 setMessageValue(prev => {
        //                     const lastMessage = prev[prev.length - 1];
        //                     return prev.map(msg => 
        //                         msg.id === lastMessage.id 
        //                             ? { ...msg, content: fullMessage }
        //                             : msg
        //                     );
        //                 });

        //                 // 检查是否是最后一个 chunk
        //                 if (parsedData.results[0].metadata.finishReason === "STOP") {
        //                     setLoading(false);
        //                 }
        //             }
        //         }
        //     }
        // } catch (error) {
        //     console.error('Error during message fetch:', error);
        //     message.error('消息发送失败');
        //     setLoading(false);
        // }
    };
    return (
        <div className="flex min-h-screen items-center justify-center">
            <div className="w-[800px] max-w-[95%]">
                <Flex vertical={true} gap="middle" justify="start">
                    <div>
                        {messageValue.map((message) => (
                            message.placement === 'start' ? (
                                <Bubble
                                    key={message.id}
                                    placement="start" // 用户消息在左侧
                                    content={message.content}
                                    avatar={{
                                        icon: <UserOutlined />, // 用户头像
                                        style: fooAvatar, // 动态设置头像样式
                                    }}
                                    header="星轨爱剪辑"
                                    style={{ marginBottom: '10px', textAlign: 'left' }}
                                />
                            ) : (
                                <Bubble
                                    key={message.id}
                                    placement="end" // AI 消息在右侧
                                    content={message.content}
                                    avatar={{
                                        icon: <UserOutlined />, // AI头像
                                        style: barAvatar, // 动态设置头像样式
                                    }}
                                    header="智普AI"
                                    style={{ marginBottom: '10px', textAlign: 'left' }}
                                />
                            )
                        ))}
                    </div>
                    <Divider />
                    <Sender
                        loading={loading}
                        value={value}
                        onChange={(v) => {
                            setValue(v);
                        }}
                        onSubmit={() => {
                            setValue('');  // 清空用户输入框
                            sendMessage(); // 调用 sendMessage 发送请求
                        }}
                        onCancel={() => {
                            setLoading(false);
                            message.error('取消发送!');
                        }}
                    />
                </Flex>
            </div>
        </div>
    )
}